<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>床位详情</title>
		<link rel="shortcut icon" href="img/logo.jpg">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="css/bootstrap-responsive.css" rel="stylesheet" />
		<link href="css/bootstrap.css" rel="stylesheet" media="screen">
		<style>
			table.data {
				border-collapse: collapse;
				width: 100%;
			}
			
			table.data>thead>tr {
				background: #5CB85C;
			}
			
			table.data>tbody>tr:nth-child(even) {
				background: #efefef;
				border: 1px solid #dddddd;
			}
			
			table.data td,
			table.data th {
				padding: 5px;
				text-align: center;
				border: 1px solid #dddddd;
			}
			
			table.data tr:hover {
				background: #5Cee5C;
			}
			
			.pagination-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 1em;
			}
		</style>
	</head>
	<body>
		<article>
			<header>
				<legend>床位详情</legend>
				<ul class="breadcrumb">
					<li>
						<a href="#">主页</a> <span class="divider">/</span>
					</li>
					<li>
						<a href="#">床位管理</a> <span class="divider">/</span>
					</li>
					<li class="active">
						床位详情</a>
					</li>
				</ul>
				<ul>
					<li><button type="submit" class="btn btn-info" @click="addNewBeds">新增</button></li>
				</ul>
			</header>
			<menu style="text-align: center;">
				<select v-model="key" name="">
					<option value="">全部床位</option>
					<option value="0">空置床位</option>
					<option value="1">已住床位</option>
					<option value="2">待修床位</option>
				</select>
				<input v-model="key" type="text" placeholder="请输入查询条件">
				<button @click="gotoPage" class="primary">查询</button>
			</menu>
			<section class="grow">
				<table class="data">
					<thead>
						<tr>
							<th>序号</th>
							<th>床位编号</th>
							<th>床位状态</th>
							<th>床位描述</th>
							<th>操作</th>
						</tr>
					</thead>

					<tbody id="rowsEL" v-if="result!=null">
						<tr v-for="(row,i) in result.rows">
							<td>{{i+1}}</td>
							<td>{{row.no}}</td>
							<!--<td>{{row.state}}</td>-->
							<td v-if="row.state===0">空置</td>
							<td v-if="row.state===1">已住</td>
							<td v-if="row.state===2">待修</td>
							<td>{{row.description}}</td>
							<td>
								<button type="button"><a :href="'modBeds.html?id='+row.id">修改</a></button>

							</td>
						</tr>

					</tbody>
				</table>

				<article class="pagination-box" v-if="result">
					<div>
						<span>共<b>{{result.totalRows}}</b>条记录</span>
						<span>每页<b>{{result.pageSize}}</b>条</span>
						<span>共<b>{{result.totalPages}}</b>页</span>
					</div>

					<div id="pagination-links-box">
						<a href="javascript:" @click="gotoPage(1)">首页</a>
						<a href="javascript:" @click="gotoPage(result.pageNo-1)">上一页</a>
						<b id="pageNoEL">{{result.pageNo}}</b>
						<a href="javascript:" @click="gotoPage(result.pageNo+1)">下一页</a>
						<a href="javascript:" @click="gotoPage(result.totalPages)">末页</a>
					</div>
		</article>

		</section>
		</article>

		<script src="../../common/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../common/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="http://code.jquery.com/jquery.js"></script>
		<script src="js/bootstrap.js"></script>
		<script>
			const app = new Vue({
				el: "body>article",
				data: {
					key: null,
					result: null,
				},
				watch: {
					"result.pageSize": function(newV, oldV) {
						//this.gotoPage(this.result.pageNo,newV);
					}
				},
				methods: {
					gotoPage: function(pageNo) {
						axios.get("/bed/list", {
								params: {
									key: this.key,
									pageNo: pageNo,
									pageSize: 6
								}
							})
							.then(function(resp) {
								if(resp.code === "ok") {
									app.result = resp.data;
									console.log(app.result.totalPages);
								}
							});
					},
					addNewBeds() {
						location.href = "addBeds.html";
					}
//					modOneBeds(){
//						location.href="'modBed.html?id='+row.id"
//					}
				} //				mounted:function(){ }
			});
		</script>
	</body>

</html>